<template>
  <div class="tab_cut">
      <span :class="cutIndex==0?'active':''" @click="cut(0)">商品介绍</span>
      <span :class="cutIndex==1?'active':''" @click="cut(1)">商品评价</span>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
export default {
  setup(props,{emit}) { // setup 有两个形参，props 是获取父元素传入子元素的值
    // console.log(ctx);
    const cutIndex = ref(0);
    const cut = (i) => {
       cutIndex.value = i;
       emit('cut',i);
    }
    return {
      cutIndex,
      cut
    }
  },
};
</script>
<style lang="scss" scoped>
.tab_cut{
  line-height: 44px;
  font-size: 16px;
  background: #fff;
  margin-top: 10px;
  span{
    display: inline-block;
    width: 50%;
    text-align: center;
  }
  .active{
    border-bottom: 2px solid red;
  }
}
</style>